<template>
	<view v-if="pageData" :style="{backgroundColor:pageData.bgColor,padding:pageData.margin?`0 ${pageData.margin*2}rpx`:0}">
		<view class="swiper">
			<swiper :indicator-dots="pageData.list.length > 1" :autoplay="true"  :interval="pageData.interval" :duration="1500" 
					indicator-color="#ffffff" :indicator-active-color="color" circular class="swiper hidden" v-if="pageData.list.length"
					:style="{ height: pageData.style == 1 ? `${firstHeight}rpx` : `${fullHeight}rpx`, borderRadius:pageData.radius?`${pageData.radius*2}rpx`:0}">
				<swiper-item v-for="(item,index) in pageData.list" :key="index" @click="$banerGo(item)">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="wh"></image>
				</swiper-item>
				<!-- 占位元素 -->
				<image :src="$imgUrls(pageData.list[0].img)" mode="widthFix" style="width: 100%; opacity: 0;" @load="handleLoad" 
				      @click="$banerGo(pageData.list[0])"></image>
			</swiper>
			
			<!-- <view class="search flexac white" v-if="searchData && searchData.search" 
			     :style="{'backgroundColor':searchData.searchBgColor, top: isImmerse==2?`${searchTop}rpx`:'24rpx'}"
				 :class="searchData.searchPosition=='left'||isImmerse==2?'left':'right'" @click="$pop.toSearch">
				 <view class="iconfont icon-sousuokuang1 white size28"></view>
			</view> -->
		
		</view>

	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'Bannel',
		props:['pageData','searchData','isImmerse'],
		data() {
			return {
				fullHeight: '',
				firstHeight: '',
				// searchTop: ''
			}
		},
		onReady() {
			const { navHeight, System } = JSON.parse(uni.getStorageSync('oldbag'))
			const { screenWidth, screenHeight, safeAreaInsets, statusBarHeight } = System
			// 沉浸式
			this.fullHeight = screenHeight - safeAreaInsets.bottom
			if(this.isImmerse == 1){ // 非沉浸式
				this.fullHeight = this.fullHeight - statusBarHeight - navHeight
			}
			this.fullHeight = this.fullHeight*(750/screenWidth) - 100
			// 计算沉浸式时搜索框垂直距离
			// this.searchTop = (statusBarHeight + navHeight/2)*(750/screenWidth) - 33
		},
		methods: {
			// 占位图片载入完毕
			handleLoad(e){
				const { width, height } = e.detail
				const { screenWidth } = JSON.parse(uni.getStorageSync('oldbag')).System
				this.firstHeight = 750/(width/height)
			},
			
		},
	

		computed: {
			...mapState(['color']),
		}
	}
</script>

<style lang="scss" scoped>
	.swiper,.swiper swiper-item{
		width:100%;
		// height: 750 * 0.75rpx;
		position: relative;
	}
	.search{
		width:66rpx;
		height: 66rpx;
		border-radius: 50%;
		position: absolute;
		// top:24rpx;
	}
	.left{
		left:24rpx;
	}
	.right{
		right:24rpx;
	}
</style>
